<template>
    <section class = "real-app">
        <div class="tab-container">
            <tabs :value='tabValue' @change="handleChangeTab">
                <tab label="tab1" index="1" >
                    <span>tab content 1</span>
                </tab>
                <tab index="2">
                    <span slot="label" style="color: red">tab2</span>
                    <span>tab content 2</span>
                </tab>
                <tab label="tab3" index="3">
                    <span>tab content 3</span>
                </tab>
            </tabs>
        </div>
        <input 
            type="text"
            class = "add-input"
            autofocus ="autofocus"
            placeholder="接下去要做什么？"
            @keyup.enter = "handleAdd"
        >
        <item 
            :todo = "todo"
            v-for = "todo in filteredTodos"
            :key = "todo.id"
            @del = "deleteTodo"
            @toggle= "toggleTodoState"
        />

        <helper 
            :filter="filter" 
            :todos = "todos"
            @toggle = "toggleFilter"
            @clearAllCompleted = "clearAllCompleted"

        />
        <router-view />
    </section>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import Item from './item.vue'
import Helper from './tabs.vue'
// let id = 0
export default {
    metaInfo: {
        title: 'Todo App'
    },
    data(){
        return {
            filter:'all',
            tabValue: '1'
        }
    },
    props: ['id'],
    watch:{
        id(newVal,old){
            console.log(newVal, old)
        }
    },
    mounted(){
        // console.log(this.id)
        if(this.todos && this.todos.length < 1) {
            this.getTodos()
        }
    },
    beforeRouteEnter(to, from, next){
        console.log("todo before enter")
        next()
    },
    // params 变化时获取数据
    beforeRouteUpdate(to, from, next) {
        console.log("todo before update")
        next()
    },
    components:{
        Item,
        Helper,
    },
    computed:{
        ...mapState(['todos']),
        filteredTodos(){
            if(this.filter ==='all'){
                return this.todos
            }
            const completed = this.filter === 'completed'
            return this.todos.filter(todo =>completed === todo.completed)
        }
    },

    
    methods:{
        ...mapActions(['getTodos', 'addTodo', 'updateTodo', 'deleteTodo','deleteAllCompleted']),
        // addTodo(e){
        //     this.todos.unshift({
        //         id:id++,
        //         content:e.target.value.trim(),
        //         completed:false
        //     })
        //     e.target.value = ''
        // },
        // deleteTodo(id){
        //     this.todos.splice(this.todos.findIndex(todo =>todo.id === id),1)
        // },
        toggleTodoState(todo){
            this.updateTodo({
                id: todo.id,
                todo: Object.assign({}, todo, {
                    completed: !todo.completed
                })
            })
        },
        handleAdd(e){
            const content = e.target.value.trim()
            if(!content){
                this.$notify({
                    content: '输入不能为空'
                })
                return 
            }
            const todo = {
                content,
                completed: false
            }
            this.addTodo(todo)
            e.target.value = ''
        },
        toggleFilter(state){
            this.filter = state
        },
        clearAllCompleted(){
            // this.todos = this.todos.filter(todo => !todo.completed)
            this.deleteAllCompleted()
        },
        handleChangeTab(value){
            this.tabValue = value
        }
    }
}
</script>
<style lang="stylus" scoped>
.tab-container{
    background-color #fff
    padding 0 15px  
}
.real-app{
    width 600px
    margin 0 auto
    box-shadow  0 0 5px #666
    }
.add-input{
    // position relative
    width 100%
    font-size 24px
    font-weight inherit 
    line-height 1.4em
    
    outline none 
    color inherit 
    
    box-sizing border-box
    -webkit-font-smoothing:antialiased
    padding 16px 16px 16px 60px
    border none 
    box-shadow inset 0 -1px 1px 0 rgba(0,0,0,0.3)

    

    }

</style>
